{% extends 'xadmin/base/base.html' %}

{% load static %}

{% block title %}
    文章编辑
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'plugins/editormd/css/editormd.css' %}">
{% endblock %}

{% block header %}
    文章编辑
{% endblock %}

{% block header-option %}
    书籍是人类进步的阶梯
{% endblock %}

{% block content %}
    <div class="row">
  <div class="col-md-12 col-xs-12 col-sm-12">
    <div class="box box-primary">
      <div class="box-body">
        <div class="form-group">
          <label for="news-title">文章标题</label>
          {% if news %}
            <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入文章标题"
                   value="{{ news.title }}">
          {% else %}
            <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入文章标题" autofocus>
          {% endif %}
        </div>
        <div class="form-group">
          <label for="news-desc">文章摘要</label>
          {% if news %}
            <textarea name="news-desc" id="news-desc" placeholder="请输入新闻描述" class="form-control"
                      style="height: 8rem; resize: none;">{{ news.digest }}</textarea>
          {% else %}
            <textarea name="news-desc" id="news-desc" placeholder="请输入新闻描述" class="form-control"
                      style="height: 8rem; resize: none;"></textarea>
          {% endif %}
        </div>
        <div class="form-group">
          <label for="news-category">文章分类</label>
          <select name="news-category" id="news-category" class="form-control">
            <option value="0">-- 请选择文章分类 --</option>
            {% for one_tag in tags %}
              <!-- 传tag_id到后台 -->
              {% if news and one_tag == news.tag %}
                <option value="{{ one_tag.id }}" selected>{{ one_tag.name }}</option>
              {% else %}
                <option value="{{ one_tag.id }}">{{ one_tag.name }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
        <div class="form-group" id="container">
          <label for="news-thumbnail-url">文章缩略图</label>
          <div class="input-group">
            {% if news %}
            <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                   placeholder="请上传图片或输入文章缩略图地址" value="{{ news.image_url }}">
              {% else %}
              <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                   placeholder="请上传图片或输入文章缩略图地址">
            {% endif %}

            <div class="input-group-btn">
              <label class="btn btn-default btn-file">
                上传至服务器 <input type="file" id="upload-news-thumbnail">
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="progress" style="display: none">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0;">0%</div>
          </div>
        </div>
        <div class="form-group">
          <label for="news-content">文章内容</label>
          {% if news %}
            <div id="news-content">
                 <textarea name="content" id="content">{{ news.content|safe }}</textarea>
            </div>
          {% else %}
            <div id="news-content">
                <textarea name="content" style="display:none;" id="content"></textarea>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="box-footer">
          {% if news %}
            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news" data-news-id="{{ news.id }}">更新文章 </a>
          {% else %}
           <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news">发布文章 </a>
          {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
    <script src="{% static 'plugins/editormd/editormd.js' %}"></script>
    <script>
    let testEditor;
    $(function () {
      $.get("{% static 'plugins/editormd/examples/test.md' %}", function (md) {
        testEditor = editormd("news-content", {
          width: "98%",
          height: 730,
          path: "{% static 'plugins/editormd/lib/' %}",
          markdown: md,
          codeFold: true,
          saveHTMLToTextarea: true,
          searchReplace: true,
          htmlDecode: "style,script,iframe|on*",
          emoji: true,
          taskList: true,
          tocm: true,         			// Using [TOCM]
          tex: true,                   // 开启科学公式TeX语言支持，默认关闭
          flowChart: true,             // 开启流程图支持，默认关闭
          sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
          imageUpload: true,
          imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
          imageUploadURL: "{% url 'x-admin:markdown_image_upload' %}",
{#          onload: function () {#}
{#            console.log('onload', this);#}
{##}
{#          },#}
          /**设置主题颜色 把这些注释去掉主题就是黑色的了*/
{#          editorTheme: "pastel-on-dark",#}
{#          theme: "dark",#}
{#          previewTheme: "dark"#}
        });
      });
    });
    </script>
    <script src="{% static 'xadmin/js/news/news_pub.js' %}"></script>
{% endblock %}